<template>
  <div>
    <!-- svg图标是外层容器的节点，内部需要与use标签结合使用 -->
    <svg :style="{ width, height }">
      <!-- xlink:href执行用哪一个图标 ,属性值必须使用#icon-名称 -->
      <!-- 使用fill设置图标颜色 -->
      <use :xlink:href="prefix + name" :fill="color"></use>
    </svg>
  </div>
</template>
<script lang="ts" setup>
// 接受父组件传过来的参数
defineProps({
  // 图标前缀
  prefix: {
    type: String,
    default: '#icon-'
  },
  // 图标名称
  name: String,
  // 图标颜色
  color: {
    type: String,
    default: 'black'
  },
  // 图标宽度
  width: {
    type: String,
    default: '16px'
  },
  // 图标高度
  height: {
    type: String,
    default: '16px'
  }
})
</script>
